<template>
  <div class='container'>
    <el-row>
      <el-col :span="6">
        【题型】：{{ti[questionsLIst.questionType]}}
      </el-col>
      <el-col :span="6">
        【编号】：{{questionsLIst.id}}
      </el-col>
      <el-col :span="6">
        【难度】：{{nan[questionsLIst.difficulty]}}
      </el-col>
      <el-col :span="6">
        【标签】：{{questionsLIst.tags}}
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        【学科】：{{questionsLIst.subjectName}}
      </el-col>
      <el-col :span="6">
        【目录】：{{questionsLIst.directoryName}}
      </el-col>
      <el-col :span="6">
        【方向】：{{questionsLIst.direction}}
      </el-col>
    </el-row>
    <hr>
    <el-row>
      <el-col :span="2">
        【题干】：
      </el-col>
    </el-row>
    <span v-html="questionsLIst.question" style="color: blue"></span>
    <div v-if="questionsLIst.questionType != 3">
      <el-row>
      <el-col :span="10">
        {{questionsLIst.questionType == 1 ? '单选题': '多选题'}} 选项：（以下选中的选项为正确答案）
      </el-col>
    </el-row>
      <!-- 选项 -->
      <div v-if="questionsLIst.questionType == 1">
        <el-radio-group v-model="sours" @change="change">
          <el-radio :label="i.id" v-for=" i in questionsLIst.options" :Key="i" >{{i.title}}</el-radio>
        </el-radio-group>
      </div>
      <div v-if="questionsLIst.questionType == 2">
        <el-checkbox-group v-model="soursCheck"  @change="change">
          <el-checkbox :label="i.id" v-for=" i in questionsLIst.options" :Key="i">{{i.title}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <hr>
    <el-row>
      【参考答案】：<el-button type="danger" size="small" @click="Video = true">视频答案预览</el-button>
      <div>
        <video :src="questionsLIst.videoURL" class="video" autoplay controls v-if="Video"></video>
      </div>
    </el-row>
    <hr>
    <el-row class="jiexi">
      <div style="margin: 14px 0">【答案解析】：</div><span v-html="questionsLIst.answer"></span>
    </el-row>
    <el-row>
      【题目备注】：{{questionsLIst.remarks}}
    </el-row>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions/'
export default {
  name: 'questionsPreview',
  data () {
    return {
      nan: ['','简单', '一般' ,'困难'],
      ti: ['','单选题', '多选题' ,'简答题'],
      questionsLIst: [],
      sours: 0, // 显示被选中的单选id
      soursCheck: [], // 多
      Video: false,
      idd: 0, // 保存被选中的单选id
      iddA: [] // 保存多选
    }
  },
  props: ['TableID'],
  created () {
    this.getList()
  },
  methods: {
    getList() {
      detail({id: this.TableID})
        .then(data => {
          this.questionsLIst = data.data
          if (data.data.questionType == 1) {
            data.data.options.forEach(i => {
            if (i.isRight === 1) {
              this.idd = i.id
              return this.sours = i.id
            }
          })
          } else if (data.data.questionType == 2) {
            data.data.options.forEach(i => {
            if (i.isRight === 1) {
              this.iddA.push(i.id)
              return this.soursCheck.push(i.id)
            }
          })
          }
        })
        .catch(err => {
          this.$message.e('错了哦，这是一条错误消息')
        })
    },
    change () {
      this.sours = this.idd
      this.soursCheck = this.iddA
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  .el-row {
    margin-bottom: 20px;
  }
  .el-radio-group, .el-checkbox-group {
    display: flex;
    flex-direction: column;
    .el-radio, .el-checkbox {
      margin-bottom: 20px;
    }
  }
  .jiexi {
    display: flex;
  }
  .video {
    width: 400px;
    height: 300px;
  }
}
</style>
